<template>
  <div>
    <h1>ElementUI 简单操作</h1>
    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>

    <el-progress :percentage="50"></el-progress>
    <el-progress :percentage="100" :format="format"></el-progress>
    <el-progress :percentage="100" status="success"></el-progress>
    <el-progress :percentage="100" status="warning"></el-progress>
    <el-progress :percentage="50" status="exception"></el-progress>
    <hr />
    <h1 align="center">用户页面展现</h1>

    <!-- 1.面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>葫芦娃</el-breadcrumb-item>
      <el-breadcrumb-item>爷爷</el-breadcrumb-item>
      <el-breadcrumb-item>蛇精</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2.卡片设置 -->
    <el-card class="box-card">

      <!-- 4.栅格 将一行动态划分为24份  -->
      <el-row :gutter="15">
        <el-col :span="8">
          <!-- 3文本输入框  -->
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary">新增</el-button>
        </el-col>
      </el-row>

      <!-- 准备表格数据 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期111">
        </el-table-column>
        <el-table-column prop="name" label="姓名222">
        </el-table-column>
        <el-table-column prop="address" label="地址333">
        </el-table-column>
        <el-table-column label="操作" width="150px">
              <el-button type="primary" icon="el-icon-edit" circle @click="addUser"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>

      <!-- 图片上传的JS
        1. action: 代表图片上传的地址url
        2. file-list: 图片列表数据的集合[{name:"xx",url:"xxx"},{}]
        3. 钩子函数: 满足某些条件时触发.
        4. on-preview 当点击已上传列表的信息时触发
        5. on-remove  当移除列表中的图片时触发
      -->
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>


    </el-card>




  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: true,
        tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                  }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                  }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                  }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                  }],
            fileList: [{name: 'food.jpeg', url: 'https://img14.360buyimg.com/n0/jfs/t1/221839/26/1688/93422/6188bb24Ed10456ba/3767d2388a95a347.jpg'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      }
    },
    methods: {
      addUser(){
        alert("点击事件!!!!!")
      },
      handlePreview(){
        console.log("触发查看函数!!!!")
      },
      handleRemove(){
        console.log("移除时触发!!!!")
      }
    }
  }
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>

</style>
